<template>
	<div>
		<el-container  v-loading="loading">
		  <el-header >
			  <!-- <a class="logo" href="/">来做客</a> -->
			 <div class="dis" style="width: 1300px;margin: 0 auto;">
				 <div class="logo">
				 				  <img src="../../assets/520.png" />
				 </div>
				 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
				   <el-menu-item index="1">课件</el-menu-item>
				   <el-menu-item index="2">课堂游戏</el-menu-item>
				 </el-menu>
				 <div class="right dis">
					  <div style="margin-left: 3%;width: 60px;" @click="course">
						  <i class="ico" ></i>
						  <p  :style="{color:col}">使用教程</p>
					  </div>
					 
					  <el-dropdown>
							<div style="margin-right: 22.5%;width: 150px;">
							  <i class="my"></i>
							  <p>用户昵称</p>
							</div>
						<el-dropdown-menu style="margin-top: -20px;" class="dropdow" slot="dropdown">
						  <el-dropdown-item>
							  <div @click="tui">退出</div>
						  </el-dropdown-item>
						</el-dropdown-menu>
					  </el-dropdown>
				 </div>
			 </div>
		  </el-header>
		  <el-main>
			 <!-- <course v-if="activeIndex == '1'"></course> -->
			 <!-- <game v-if="activeIndex == '2'"></game> -->
			 <router-view></router-view>
		  </el-main>
		</el-container>
	</div>
</template>

<script>
	// import course from '../course/course.vue'
	// import game from '../game/game.vue'
	export default {
		// components:{game},
		data(){
			return{
				activeIndex:'1',
				loading:false,
				col:''
			}
		},
		created() {
			console.log(this.$route.path)
			if(this.$route.path == '/game'){
				this.activeIndex = '2'
			} else {
				this.activeIndex = '1'
			}
			this.init()
		},
		methods:{
			init(){
			},
			
			//试用教程
			course(){
				this.$router.push({path:'/probation'})
				this.col = '#3456c5'
				this.activeIndex =  ''
			},
			//退出
			tui(){
				this.$router.push('/login')
				sessionStorage.clear()
			},
			handleSelect(e){
				this.activeIndex = e
				this.col = ''
				if(e == 1){
					this.$router.push({path:'/'})
				} else {
					this.$router.push({path:'/game'})
				}
				console.log(e,'lll')
			},
		
		}
	}
</script>



<style lang="scss" scoped="scoped">
	.dropdow{
		;margin-right: 25px;width: 80px;text-align: center;
	}
	.right{
		position: relative;
		width: 280px;
		p{
			color: #1f1f1f;
			font-size: 14px;
		}
	}
	.my{
		width: 24px;
		    height: 24px;
		    background-size: 24px;
		    position: absolute;
		    top: 8px;
		    left: 50%;
		    margin-left: -12px;
		    background-image: url();
	}
	.ico{
		width: 19px;
		    height: 22px;
		    background-size: 19px 22px;
		    position: absolute;
		    top: 8px;
		    left: 27px;
		    background-image: url();
		    background-repeat: no-repeat;
	}
	
	
	.logo{
		margin-left: 49px;
		margin-top: 10px;
		img{
			width: 100px;
			height: 40px;
		}
	}
	.el-menu--horizontal>.el-menu-item.is-active {
	    border-bottom: 3px solid #000000;
	    color: #000000;
		font-weight: 600;
	}
	.el-menu.el-menu--horizontal {
	    border-bottom: solid 1px #ffffff;
	}
	.logo[_v-8cdd7bec] {
	  
	}
	.el-menu-demo{
		width: 400px;
		height: 58px;
		// background-color: #007AFF;
		display: flex;
		justify-content: space-between;
	}
	body > .el-container {
	    margin-bottom: 40px;
	  }
	.el-header, .el-footer {
	    background-color: #ffffff;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
		border-bottom: 1px solid #ebebeb;
	  }
	  
	  .el-aside {
	    background-color: #D3DCE6;
	    color: #333;
	    text-align: center;
	    line-height: 200px;
	  }
	  
	  .el-main {
	    color: #333;
	  }
</style>
